<template>
    <div>
      <a-drawer
      width="1100"
      :maskClosable="false"
      :visible="detailData.show"
      direction="rtl"
      @close="handleClose">
        <div slot="title">
          <!-- <i class="el-icon-arrow-left"></i> -->
          <span>服务商详情</span>
        </div>
        <el-row style="width:1120px;padding-bottom:150px;height:100%;overflow-y:auto">
          <el-col :span="22">
             <el-form :model="parames" :rules="rules" label-position="left" ref="parames" label-width="110px" class="addForm">
                <el-row style="padding: 0 40px;" :gutter="30">
                  <a-collapse :defaultActiveKey="activeNames" :bordered="false">
                    <a-collapse-panel class="marginB10" header="基本信息" key="1">
                      <el-col :span="12" style="margin-top:14px">
                          <el-form-item label="服务商全称:" prop="providerName">
                              <span>{{parames.providerName}}</span>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12" style="margin-top:14px">
                          <el-form-item label="简称:">
                              <span>{{parames.shortName}}</span>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="服务区域:" prop="serviceArea">
                            <a-tree-select
                              showSearch
                              allowClear
                              multiple
                              disabled
                              treeCheckable
                              showCheckedStrategy='SHOW_PARENT'
                              style="width: 100%"
                              :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
                              :treeData="treeData"
                              treeNodeFilterProp="title"
                              placeholder="请选择服务区域"
                              v-model="parames.serviceArea"
                            >
                            </a-tree-select>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="服务热线:" prop="serviceHotline">
                              <span>{{parames.serviceHotline}}</span>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="联系人姓名:" prop="contactName">
                              <span>{{parames.contactName}}</span>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="联系人手机:" prop="contactMobile">
                              <span>{{parames.contactMobile}}</span>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="联系人角色:" prop="contactRole">
                            <el-select disabled style="width:100%" size="small" v-model="parames.contactRole" placeholder="请选择">
                              <el-option v-for="(item,index) in contactRole" :key="index" :label="item.desc" :value="item.name"></el-option>
                            </el-select>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="经营区域:">
                            <el-cascader
                            style="width:100%"
                            size="small"
                            disabled
                            :options="options"
                            v-model="parames.businessArea"
                            >
                            </el-cascader>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="经营地址:">
                              <span>{{parames.businessServiceArea}}</span>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="业务咨询电话:">
                              <span>{{parames.consultingTelephone}}</span>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="营业执照:">
                            <span style="cursor:pointer;color:#409efe"  v-for="(item,index) in parames.attachmentSet" :key="index">
                              <span style="margin-right:10px;" v-if="!item.imgType" @click="handleDownFile(item)">{{item.name}}</span>
                              <span v-if="item.imgType" style="margin-right:10px;" @click="handleView(item)">{{item.name}}(点击预览)</span>
                            </span>
                          </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="需求概述:">
                            <span>{{parames.providerIntroduction}}</span>
                        </el-form-item>
                      </el-col>
                    </a-collapse-panel>
                    <a-collapse-panel class="marginB10" header="收款账号信息" key="2">
                      <el-col :span="24">
                        <el-table
                          :data="parames.providerAccountList"
                          style="width: 100%">
                          <el-table-column
                            prop="accountType"
                            label="账户类型"
                            width="180">
                            <template slot-scope="scope">
                                <p>{{scope.row.accountType == 'BANK'?'银行账户':''}}</p>
                                <p>{{scope.row.accountType == 'ALIPAY'?'支付宝账户':''}}</p>
                                <p>{{scope.row.accountType == 'WE_CHAT'?'微信账户':''}}</p>
                                <p>{{scope.row.accountType == 'CASH'?'现金账户':''}}</p>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="银行/支付宝/微信账号">
                            <template slot-scope="scope">
                                <p>{{scope.row.accountNumber}}</p>
                            </template>
                          </el-table-column>
                          <el-table-column
                            prop="accountName"
                            label="真实姓名/支付宝名称/微信昵称">
                          </el-table-column>
                          <el-table-column
                            prop="depositBank"
                            label="开户行">
                            <template slot-scope="scope">
                                <p>{{scope.row.depositBank !=''?scope.row.depositBank:'无'}}</p>
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-col>
                    </a-collapse-panel>
                  </a-collapse>
                </el-row>
              </el-form>
            </el-col>
        </el-row>
        
        <div class="from-bottom-box">
          <el-button size="small" @click="handleClose">取消</el-button>
        </div>
      </a-drawer>
      <imgBox :imgData="imgData"></imgBox>

    </div>
</template>

<script>
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

export default {
    props: ['detailData'],
    data() {
        return {
          treeData: regionData,
          options: regionData,
          activeNames: ['1','2'],
          file: [],
          fileList:[],
          fileAction: this.$api.postProviderUploadLicense,
          parames: {
            id: '',
            providerName: '', //服务商名称
            shortName: '', //简称
            serviceArea: [], //服务区域
            serviceHotline: '', //服务热线
            contactName: '', //联系人姓名
            contactMobile: '', //联系人手机
            contactRole: '', //角色
            businessArea: [], //经营区域
            businessServiceArea: '',//经营地址
            consultingTelephone: '',//业务咨询电话
            attachmentSet: [], //营业执照（URL上传地址
            providerIntroduction: '', //服务商简介
            providerAccountList: [] //账户信息
          },
          imgData: {
            name: '',
            url: '',
            show: false,
          },
          addAccountData: { //账户弹窗
            providerId: '', //服务商id
            title: '',
            id: '', //客户人员id
            type: '',
            data: {},
            show: false
          },
          rules: {
          },
          contactRole: [], //角色信息
        };
    },
    methods: {
      handleClose () { //关闭弹窗
        this.detailData.show = false
      },
      handleView (item) { //预览图片
        this.imgData.name = item.name
        this.imgData.url = item.url
        this.imgData.show = true
      },
      handleDownFile (item) { //附件下载
        window.location.href = this.$api.postProviderDownloadLicense+'?url=' + item.url +'&name='+ item.name
      },
      render () { //获取详情信息
        this.loading = true
        this.$post(this.$api.postProviderFind,{
          providerId: this.detailData.id
        }).then(response => {
          if (response.data.succeed) {
            let data = response.data.data
            this.parames.id = data.id
            this.parames.providerName = data.providerName //服务商名称
            this.parames.shortName = data.providerName //简称
            this.parames.serviceArea = data.serviceArea //服务区域
            this.parames.serviceHotline = data.serviceHotline //服务热线
            this.parames.contactName = data.contactName //联系人姓名
            this.parames.contactMobile = data.contactMobile //联系人手机
            this.parames.businessArea = data.businessArea //经营区域
            this.parames.businessServiceArea = data.businessServiceArea //经营地址
            this.parames.consultingTelephone = data.consultingTelephone//业务咨询电话
            this.parames.providerIntroduction = data.providerIntroduction //服务商简介
            this.parames.attachmentSet = data.attachmentSet
            this.fileList = data.attachmentSet
            this.parames.attachmentSet.forEach(el=>{
              el.imgType = this.$utils.getFileType(el.url)
            })
            data.providerAccountList.forEach(el=>{
              el.accountType = el.accountType.name
            })
            this.parames.providerAccountList = data.providerAccountList //账户信息
            if (data.contactRole) {
              this.parames.contactRole = data.contactRole.name //紧急程度
            }
            if (data.importanceLabel) {
              this.parames.importanceLabel = data.importanceLabel.name //重要程度
            }
            setTimeout(() => {
              this.loading = false
            }, 200);
          }
        })
      },
      resetData () { //重置数据
        this.parames.id = ''
        this.file = []
        this.fileList = []
        this.parames.attachmentSet = []
        this.parames.providerName = '' //服务商名称
        this.parames.shortName = '' //简称
        this.parames.serviceArea = [] //服务区域
        this.parames.serviceHotline = '' //服务热线
        this.parames.contactName = '' //联系人姓名
        this.parames.contactMobile = '' //联系人手机
        this.parames.contactRole = '' //角色
        this.parames.businessArea = [] //经营区域
        this.parames.businessServiceArea = ''//经营地址
        this.parames.consultingTelephone = ''//业务咨询电话
        this.parames.providerIntroduction = '' //服务商简介
        this.parames.providerAccountList = [] //账户信息
        this.$refs.parames.resetFields()
      }
    },
    components: {
    },
    computed: {
      changeDialog () {
        return this.detailData.show
      }
    }, 
    watch: {
      changeDialog: {
        handler (curVal, oldVal) {
          if (curVal) {
            this.$utils.getEnumberation('postProviderContactRole','contactRole',this) //获取联系人信息
            this.render()
          } else {
            this.resetData()
          }
        }
      }
    },
};
</script>

<style scoped>

</style>
